<template>
<!-- 收益 -->
  <view class="integral wap">
     <view class="row bg mt30 con">
        <view class="col_16">
            <view class="num  fs64 ">{{userCommission.Commission}}</view>
            <view class="tab ">总礼物数</view>
        </view>
       <view class="col_8">
            <view class="link f2 c1"></view>
            <view class="num f2 c2">
                <view class="btn_sm" @click="nav_to('/pages/user/tixian')">提现记录</view>
            </view>
        </view>     
    </view>

    <view class="nav_list">
    	<view class="nav_item number" @click="nav_to('/pages/user/my_gifts')">
    		<view class="nav_item_icon">
    			<image class="navimg" :src="ossPath+'/upload/1711099347308133.png'"></image>
    		</view>
    		<view class="glftsum con">礼物收入
			<view class="f3">礼物奖励随时可以结算提现</view>
			</view>
    		<view class="arr_r">
				<text class="c_money">{{userCommission.GiftIncome}}</text>
    			<uni-icons color="#A8A8AB" type="right" size="18"></uni-icons>
    		</view>
    	</view>
    	<view class="nav_item number" @click="nav_to('/pages/user/invite_commission')">
    		<view class="nav_item_icon">
    			<image class="navimg" :src="ossPath+'/upload/17110994585381005.png'"></image>
    		</view>
    		<view class="glftsum con">邀请收入
			<view class="f3">邀请好友即可获得10%奖励</view>
			</view>
    		<view class="arr_r">
				<text class="c_money">{{userCommission.InviteIncome}}</text>
    			<uni-icons color="#A8A8AB" type="right" size="18"></uni-icons>
    		</view>
    	</view>
        <!-- <view class="nav_item number" @click="nav_to('/pages/user/play_commission')">
    		<view class="nav_item_icon">
    			<image class="navimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712907455607686.png" mode=""></image>
    		</view>
    		<view class="glftsum con">滑雪收入
			<view class="f3">教练或者星助教的约球收入汇总</view>
			</view>
    		<view class="arr_r">
				<text class="c_money">{{userCommission.PlayIncome}}</text>
    			<uni-icons color="#A8A8AB" type="right" size="18"></uni-icons>
    		</view>
    	</view> -->
		<!-- <view class="nav_item number" @click="nav_to('/pages/user/shop_gift')">
			<view class="nav_item_icon">
				
			</view>
			<view class="f2 c1 con">商城礼物
			<view class="f3">好友赠送的商城礼物</view>
			</view>
			<view class="arr_r">
				<uni-icons color="#A8A8AB" type="right" size="18"></uni-icons>
			</view>
		</view> -->
		<!-- <view class="nav_item number">
			<view class="nav_item_icon">
				<image class="navimg" :src="ossPath+'/upload/1711335957381530.png'"></image>
			</view>
			<view class="glftsum con">红包收入
			<view class="f3">红包奖励可以随时提现结算</view>
			</view>
			<view class="arr_r">
				<text class="c_money">0</text>
				<uni-icons color="#A8A8AB" type="right" size="18"></uni-icons>
			</view>
		</view> -->
    </view>
    
  </view>
</template>

<script>
export default {
	data(){
		return{
			userCommission:{},
			list:[],
            price:'',
            ossPath:null
		}
	},
	onShow(){
        this.ossPath = this.$ossPath
	},
	onLoad(){
		this.init();
	},
     computed:{
            getDataTime(){
                return l => {
                    console.log(l);
                    let d = new Date(l);
                    let timestamp = d.getTime();
                    return this.$u.date(timestamp,'yyyy年mm月dd日 hh时MM分');
                }
            }
    },
	methods:{
		async getSaleChannelDetail(){
				let res = await this.$api.post('/SaleChannel/SaleChannelDetail',{CompanyID:6002});
				
				console.log(JSON.stringify(res.data));
				this.userCommission = res.data;
		},
		
		async init(){
			await this.getSaleChannelDetail();
			
		}
		
	}
}
</script>

<style lang="scss">
page{
    background: linear-gradient(180deg, #FCF5E5 0%, #F6F6F6 100%);
}
.bg{
    background: #fff;
    border-radius: 16rpx;
}
.mt30{
    margin-top: 30rpx;
}
.mt40{
    margin-top: 40rpx;
}
.fs64{
    font-size:  64rpx;
    line-height: 64rpx;
    color:#333333 ;
    /* font-weight: bold; */
}
.lh64{
    line-height: 64rpx;
}
.col_16{
    padding-left: 32rpx;
    box-sizing: border-box;
    .tab{
        font-size: 32rpx;
        color: #333333;
    }
}
.con{
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}
.col_8{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 30rpx;
    box-sizing: border-box;
    .link,
    .num{
        text-align: right;
    }
}
.f2 {
		font-size: 34rpx;
	}
	.f3 {
			font-size: 24rpx;
			color: #999999;
			margin-top: 5rpx;
            font-weight: 500;
		}
.item{
    height: 140rpx;
    align-items: center;
    border-bottom: 1px solid #333;
    &:last-child{
        border-bottom:none;
    }
    .col_18{
        box-sizing: border-box;
        padding-left: 20rpx;
        .time{
            margin-top: 20rpx;
        }
        
    }
    .col_6{
        text-align: right;
        padding-right: 20rpx;
        box-sizing: border-box;
    }
   
}
.flx{
    display: flex;
}
.add{
    color: #f00;
    &:before{
        content: "+";
    }
}
.reduce{
    color: #0f0;

}

.integral{
    padding-bottom: 80rpx;
}

.csed{
    color: #FEF0BC;
}

.ysh {
    color: #0DD48B;
}

.wsh {
    color: #d42a49;
}
.qx{
    color: #ff0000;
}
.btn_sm{
    width: 100%;
}

.pop_con{
    height: 400rpx;
    background: #fff;
    width: 650rpx;
    border-radius: 16rpx;
    .hd{
        height: 90rpx;
        line-height: 90rpx;
        border-bottom: 1px solid #eee;
        text-align: center;
        line-height: 90rpx;
        color: #333;
        font-weight: bolder;
    }
    .inp{
        margin-top: 30rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
        .lab{
            font-size: 32rpx;
            color: #666;
        }
        input{
            margin-top: 10rpx;
            height: 80rpx;
            line-height: 80rpx;
            width: 100%;
            padding-left: 10rpx;
            box-sizing: border-box;
            border: 1px solid #eee;
            border-radius: 10rpx;
            color: #000;
        }
    }
    .btns{
        margin-top: 40rpx;
        display: flex;
         padding-left: 30rpx;
        padding-right: 30rpx;
        justify-content: space-between;
        /deep/ .u-button__text{
            color: #666;
        }
        /deep/ .u-button--success{
           text{
            color: #fff !important;
           }
        }
        /deep/ .u-button{
            width: 290rpx;
        }
    }
}

.nav_list {
			padding-bottom: 120rpx;
			margin-top: 30rpx;
	
			.nav_item {
				margin-top: 52 - 22rpx;
				
				display: flex;
				align-items: center;
				position: relative;
	
				&::after {
					position: absolute;
					bottom: 0;
					right: 0;
					left: 0;
					height: 2rpx;
					content: '';
					transform: scaleY(.6);
					background-color: #404040;
				}
	
				&.number:after {
					height: 0
				}
	
				.con {
					flex: 1;
					padding-left: 12rpx;
				}
	
				.icon {
					height: 40rpx;
					width: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
	
				}
	
				.nav_item_icon {
					padding: 10rpx;
					height: 90rpx;
					width: 90rpx;
                    .navimg{
                        width: 90rpx;
                        height: 90rpx;
                    }
				}
			}
	
			.number {
				background: #fff;
				// box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.5);
				border-radius: 8rpx;
				// border: 2rpx solid #4A4A4A;
				padding-left: 24rpx;
				padding-right: 24rpx;
			}
		}

.c_money{
	font-size: 32rpx;
	color: #999999;
}
.glftsum{
    font-weight: 600;
    font-size: 32rpx;
    color: #333333;
}
</style>